<template>
	<view class="box notice_box">
		<view class="notice_container">
			<view class="notice_title">
				官方通知
			</view>
			<uni-search-bar @confirm="search" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
				@cancel="cancel" @clear="clear">
			</uni-search-bar>
			<view class="notice_list">
				<view class="notice_list_item" v-for="(item,index) in noticeArr">
					<view class="notice_list_item_top">
						{{item.noticeTitle}}
					</view>
					<view class="notice_list_item_bottom">
						<view class="notice_list_item_bottom_left over_text">
							{{item.noticeContent}}
						</view>
						<view class="notice_list_item_bottom_right">
							{{item.createTime}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		selectNoticeList
	} from "../../api/request.js"
	export default {
		data() {
			return {
				noticeArr: [],
			};
		},
		onLoad() {
			this.getNotice()
		},
		methods: {
			async getNotice() {
				let result = await selectNoticeList()
				console.log(result);
				this.noticeArr = result.data
			},
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {

			},
			blur(res) {

			},
			focus(e) {

			},
			cancel(res) {

			}
		}
	}
</script>

<style lang="scss">
	.notice_box {
		.notice_container {
			width: 90%;
			margin: auto;

			.notice_title {
				border-radius: 20rpx;
				padding: 16rpx 14rpx;
				text-align: center;
				color: white;
				background-color: #5363E3;
				margin-bottom: 20rpx;
				width: 140rpx;
			}

			.notice_list {
				display: flex;
				flex-direction: column;
				background-color: white;
				margin-top: 20rpx;

				.notice_list_item {
					display: flex;
					flex-direction: column;
					width: 90%;
					margin: auto;
					padding: 10rpx;
					margin-bottom: 20rpx;

					.notice_list_item_top {
						font-weight: 500;
						margin-bottom: 20rpx;
						margin-top: 10rpx;
					}

					.notice_list_item_bottom {
						display: flex;
						justify-content: space-between;
						color: rgba(14, 16, 33, 1);
						justify-content: space-between;

						.notice_list_item_bottom_right {
							font-size: 20rpx;
							white-space: nowrap;
						}

						.notice_list_item_bottom_left {
							font-size: 26rpx;
							width: 80%;
						}
					}
				}
			}
		}
	}
</style>